<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-08-31 16:23:37
 * @LastEditors: voanit
 * @LastEditTime: 2022-09-01 08:45:08
-->
<script setup>
import { computed } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['changeStatus', 'changeDel', 'chkA'])
/* 状态更新
1-绑定事件
2-根据id找到数组中的这一项
  2-1 点击的时候传入id
  2-2 子向父传值 传id
3-根据id将找到的这一项的状态取反  在app组件中查找
*/
const changeDone = (id) => {
  // 2 - 2 子向父传值 传id
  emit('changeStatus', id)

}

/* 根据id删除数据
1-绑定点击事件
2-传入当前点击行的id
3-根据id找到数组中的这一项
  3-1子向父传值传入id  因为数据都在app中
  3-2 根据id查找数据并将其删除
*/
const del = (id) => {
  emit('changeDel', id)
}


/* 获取当前是全选还是非全选 */
/* 获取选中状态 */
const isAll = computed(() => {
  return props.list.every(item => item.done)
})


/* 实现反选 */
const chkAll = () => {
  console.log(isAll, 99);
  emit('chkA', !isAll.value)
}
</script>

<template>
  <section class="main">
    <input @change='chkAll' id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li class="completed" v-for="item in  list" :key="item.id">
        <div class="view">
          <input class="toggle" type="checkbox" @change="changeDone(item.id)" :checked="item.done" />
          <label>{{ item.name }}==={{ isAll }}==={{ item.id }}</label>
          <button class="destroy" @click="del(item.id)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
      <!-- <li>
        <div class="view">
          <input class="toggle" type="checkbox" />
          <label>Buy a unicorn</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" value="Rule the web" />
      </li> -->
    </ul>
  </section>
</template>

<style lang="less" scoped>
</style>
